import { useEffect, useRef, useState } from "react";
import api from "../../api/request";
import st from "./vip.module.css";
import Header from "../../componets/Header";
import Search from "../../componets/Search";
import UserItem from "../../componets/UserItem";
import { createPortal } from "react-dom";
import Refresh from "../../componets/Refresh";
import { useSelector } from "react-redux";
import { letterArr } from "./constant";
import { useInput } from "../../hooks";
import { formateData } from "./tools";

// ts类型string
type StoreData = {
  gender: string;
  birthday: { min: string; max: string };
  regOrigin: string;
  regTime: { min: string; max: string };
  memberState: string;
  consumeMoney: { min: string; max: string }; //累计消费金额
  consumeTimes: { min: string; max: string }; //累计消费次数
  lastConsumeDate: { min: string; max: string }; //最近消费日期
  status: string; //微信状态
};
// 渲染函数
const VipUserList = () => {
  const [vipList, setVipList]: [vipList: {}[], setVipList: any] = useState([]);
  const [page, setPage] = useState(1);
  const pageSize = 20;
  // 控制文本还是loading   默认为true，true为loding动画，false为文本提示
  const [isLoading, setIsLoading] = useState(true);
  // 控制标题栏是否高亮带红点
  const [titleAct, setTitleAct] = useState(false);
  // 记录vip总人数
  const [vipNum, setVipNum] = useState(0);
  //控制搜索框中内容作为请求的search参数
  const { value, handleChange } = useInput();
  // 引入redux数据
  const storeData: StoreData = useSelector((state) => state as any).searchForm;
  console.log("vip列表中的redux==========>", storeData);
  //ref
  const listWrapRef = useRef<any>(null);
  const listRef = useRef<any>(null);
  // 控制如果没有更多数据则不进行上拉加载的操作了
  const hasMore = useRef(true);
  // 记录总高度和滚动果的高度
  const positionRef = useRef({ total: 0, wrap: 0 });
  // 定义阈值 距离底部的距离
  const threshold = useRef(100);
  // 控制是否要发起请求
  const canRequest = useRef(true);
  // 控制viplist的更新形式
  const mode = useRef("scroll");
  // 滚动事件处理函数
  const scrollHandler = (e: any) => {
    const { total, wrap } = positionRef.current;
    if (e.target.scrollTop + wrap + threshold.current >= total) {
      // 先改更新类型
      mode.current = "scroll";
      if (canRequest.current && hasMore.current) {
        // 如果请求可以发送了，并且仍然有更多的数据可以翻页，再改页码发请求
        setPage(page + 1);
      }
      canRequest.current = false;
    }
  };
  // 输入事件处理函数
  const handleInput = (e: any) => {
    // 先改更新数据模式
    mode.current = "input";
    // 同时还要将当前page页码修改为1，不然第n页数据中，可能没有符合查询条件的数据
    setPage(1);
    // 再换参数，因为这个参数一换就会导致请求重新发送了
    handleChange(e);
  };
  // 上划加载 (分页请求)
  useEffect(() => {
    listWrapRef.current.addEventListener("scroll", scrollHandler, false);
    return () => {
      listWrapRef.current &&
        listWrapRef.current.removeEventListener("scroll", scrollHandler, false);
    };
  }, []);
  // 发起请求的effect
  useEffect(() => {
    // 请求发起之前，先把loading搞出来
    setIsLoading(true);
    // 格式化数据
    const bodyParams = formateData(storeData)
    // 发起请求
    api
      .post(
        `/me-api/members?page=${page}&pageSize=${pageSize}&search=${value}`,bodyParams)
      .then((res) => {
        console.log(res.data);
        if (res.data.data.length < pageSize) {
          hasMore.current = false;
        } else {
          hasMore.current = true;
        }
        setIsLoading(false);
        // 异步批量操作  （分页请求数据，为合并）    （搜索请求数据，直接进行覆盖）
        if (mode.current === "input") {
          setVipList(res.data.data);
        }
        if (mode.current === "scroll") {
          setVipList([...vipList, ...res.data.data]);
        }

        setVipNum(res.data.total);

        setTimeout(() => {
          const total = listRef.current.offsetHeight;
          const wrapHeight = listWrapRef.current.offsetHeight;
          canRequest.current = true;
          positionRef.current = {
            total: total,
            wrap: wrapHeight,
          };
        }, 1);
      });
  }, [page, value]);
  // 高亮判断  只要store里的数据有一个不是空的就高亮
  useEffect(() => {
    for (const [key, value] of Object.entries(storeData)) {
      if (typeof value === "string") {
        if (value) {
          setTitleAct(true);
          return;
        }
      }
      if (typeof value === "object") {
        if (Object.values(value).some((item: any) => item !== "")) {
          setTitleAct(true);
          return;
        }
      }
    }
    setTitleAct(false);
  }, [storeData]);

  return (
    <>
      <div className={`${st.container} box`}>
        <Header
          leftIcon={true}
          marginLeft={"30vw"}
          rightIcon={true}
          haveSelect={titleAct} //用来控制是否高亮显示，如果高级搜索里面有选中项则为true高亮
        >
          会员列表
        </Header>
        <Search value={value} handleChange={handleInput} />

        {/* 这个div才是发生滚动的真正元素 */}

        <div className={st.underBox} onScroll={scrollHandler} ref={listWrapRef}>
          <div ref={listRef}>
            <div className={st.count}>
              <span className={st.countText}>
                会员列表({vipNum}人) {titleAct ? "筛选后" : ""}
              </span>
            </div>
            {vipList.map((item: any) => (
              <UserItem item={item} key={item.id} />
            ))}
            <Refresh isLoading={isLoading} />
          </div>
        </div>
        <LetterList />
      </div>
    </>
  );
};

// 字母表
const LetterList = () => {
  return createPortal(
    <div className={st.letter}>
      {letterArr.map((item: string, idx: number) => (
        <div key={idx}>{item}</div>
      ))}
    </div>,
    document.body
  );
};

export default VipUserList;
